{extend name="./tpl/default/mobile/public/layout1.html" /}
{block name='title'}艾诺{/block}
{block name='head'}
<link rel="stylesheet" href="http://at.alicdn.com/t/font_nwyx16wiwvk21emi.css">
<style>
    .bh-sku-selected {
        color: #fff;
        background-color: #dd514c;
        border-color: #dd514c;
    }

    .biqasqq {
        padding: 1rem 0;
    }

    .am-sticky-placeholder {
        height: 47px !important;
    }

    .nasaa {
        float: left;
        width: 50%;
        text-align: left;
        padding-left: 10px;
        font-size: 14px;
        color: #fff;
    }

    .hsa {
        padding-left: 20px;
        text-align: center;
    }

    .xdsa {
        width: 100%;
        background: url(/public/home/mobile/image/images/37.jpg) 80% no-repeat;
        margin: 0;
        padding: 10px;
        height: 64px;
    }

    .nasaa p {
        margin-bottom: 0
    }

    .cnad {
        color: #563404;
    }

    .cnad span {
        background: #563404;
        border-radius: 2px;
        color: #fff;
        margin: 3px;
        padding: 3px;
        font-size: 12px;
    }

    .nfg p {
        color: #7D7D7D !important;
    }

    .split {
        display: none;
    }

    .layui-m-anim-up {
        width: 80% !important;
        padding: 0.8rem !important;
        text-align: center !important;
    }

    .layui-m-layer1 .layui-m-layercont {
        padding: 0.8rem !important;
        text-align: center !important;
    }

    .asdd {
        margin-right: 10px;
        background: red;
        color: #fff;
        border-radius: 5px;
        margin-top: 10px;
    }
    p img{
        width: 89vw;
    }
</style>
<div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
    <div class="am-u-sm-10">
        <a href="" onclick="history.back(-1)"><span class="icon iconfont icon-xiangzuojiantou"></span></a>
    </div>
    <div class="am-u-sm-2">
        <span class="icon iconfont icon-sousuo"></span>
        <span class="icon iconfont icon-gouwuche"></span>
    </div>
</div>
{/block}
{block name='body'}

<div class="am-panel am-panel-default" id="about">
    <div style="line-height: 40px;height: 40px;    text-align: center;  background: red;color: #fff;">参加集采活动需要缴纳保证金
    </div>
    <div class="am-panel-bd am-panel-hd" style="padding: 0px;">
        <div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
            <ul class="am-slides">
                {volist name="goodsInfo.album_arr" id="vo"}
                <li><img src="{$vo}"/></li>
                {/volist}
            </ul>
        </div>

        <div class="am-g doc-am-g xdsa">
            <div class="nasaa">
                <p>集采价</p>
                <p style="margin-top: -10px;">
                    ￥<span style="margin-top: -10px;font-size:24px;" id="unitPrice">{$goodsInfo.market_price}</span>
                    <span style="text-decoration: line-through;">￥{$goodsInfo.simple_price}</span>
                </p>
            </div>
            <div class="nasaa hsa">
                <p style="color:red;">距离结束仅剩</p>
                <div class="yomibox cnad" data-emsg="集采已结束" data-etime="{$goodsInfo['promotion_end_time']}"></div>
            </div>
        </div>
        <div class="am-g   jsa jf" style="padding-top: 10px;">
            <div class="am-u-sm-9 " style="line-height: 40px;">{$goodsInfo.fulltitle}</div>
            <div class="am-u-sm-3 nfg" style="color:#C1C1C1; float:left; text-align:left; padding-left: 0px;padding-top: 5px;">
                <p>已集 <span>{$jicainum}</span></p>
                <!--<p>总数 <span>26990</span></p>-->
            </div>
        </div>
    </div>
</div>
<div class="number-group ys" style="padding:10px 0  10px  10px;">
    <span>数量：</span>
    <span class="iconfont icon-jiajian-1" data-min="{$goodsInfo.minimum}" onclick="dec(this)"></span>
    <input type="text" name="number" id="number" value="{$goodsInfo.minimum|default=1}" style="width:45px;">
    <span class="iconfont icon-jiajian-" data-max="{$goodsInfo.goods_stock}"
          onclick="inc(this)"></span>
    <button class="am-btn am-btn-success" type="button" onclick="sub()" style="outline: none;">参加集采</button>
</div>
<div style="clear: both;"></div>

<div class="am-panel am-panel-default" id="for">
    <div class="am-panel-bd am-panel-hd">
        <div class="am-g kb" style="background:#f2f2f2;">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default qica">
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
                            <div class="am-u-sm-2  xtp">
                                {php}$shop =get_shop_info($goodsInfo['site_id']);{/php}
                                <a href="{$goodsInfo.site.url}" class="">
                                    <img src="{$shop.site_image}" style="width: 57px;height: 57px;">
                                </a>
                            </div>
                            <div class=" am-u-sm-10  am-list-main jl jqw">


                                <h3 style="margin:0px;">{$shop.site_name}</h3>
                                <div class="am-list-item-text">{$shop.address}</div>
                                <div class="da">
                                    <a href="{:url('point/index')}"><span>积分首页</span></a>
                                    <a href="tel://{$shop.site_tel}"><span>电话咨询</span></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="am-g kba">
    <div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0 0 1rem 0; ">
        <div class="am-list-news-bd">
            <ul class="am-list">
                <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
                    <div class=" am-u-sm-10  am-list-main jl" style="padding-left: 10px; ">
                        <h3 style="margin: 0px;">规格参数</h3>
                        {volist name="goodsInfo.extend_list" id="vo"}
                        <div class="am-list-item-text">{$vo.item_name}：{$vo.value}</div>
                        {/volist}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="am-panel am-panel-default" id="team">
    <div class="am-panel-bd am-panel-hd">
        <style>
            .am-list p {
                margin: 0 auto;
                -webkit-margin-before: 0em;
                -webkit-margin-after: 0em;
            }
        </style>
        <div class="am-g kb">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default">
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
                            <div class=" am-u-sm-12  am-list-main jl binaju">
                                <h3 style="padding-left:0;">商品详情</h3>
                                <div class="am-list ">
                                    {$goodsInfo.content}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--{include file="./tpl/default/mobile/public/foot1.html"/}-->

<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
     id="">
    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: rgba(0,0,0,0.5);">
        <li style="padding: 5px;">
            <a href="{:url('/home/Index/index')}" class="">
                <span class="icon iconfont icon-shouye"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li style="padding: 5px;">
            <a href="" class="" style="    /* display: inline-block; */
    /* width: 100%; */
    /* height: 49px; */
    /* line-height: 20px; */">
                <button type="button" class="am-btn am-btn-success" onclick="sub()" style="outline: none;margin-top: -18px;">参加集采</button>
            </a>
        </li>

    </ul>
</div>

{/block}
{block name='script'}
<script src="/public/plugins/template/template.js"></script>
<script src="/public/plugins/dropload/dropload.js"></script>
<script src="/public/plugins/sku-field/sku.js"></script>
<script src="/public/plugins/layerMobile/layer.js"></script>
<script type="text/javascript" src="/public/plugins/timedown/jquery.yomi.js"></script>
<script src="/public/plugins/jsAddress/jsAddress.js"></script>
<script type="text/html" id="geval-tpl">
    {{each data as val key}}
    <div>
        <div class="am-g binaju">
            <div class="am-u-sm-2"><img src="//misc.360buyimg.com/lib/img/u/b56.gif" alt=""
                                        style="width:54px; height:54px;">
            </div>
            <div class="am-u-sm-10 xqaaqw">
                <p>{{val.username}}</p>
                <span style="font-size:1.4rem;">{{val.geval_time}}</span>
            </div>
        </div>
        <div class="asxcax">
            <div>
                <p> {{val.geval_content}} </p>
            </div>

            <div data-am-widget="slider" class="am-slider am-slider-default"
                 data-am-slider='{&quot;animation&quot;:&quot;slide&quot;,&quot;animationLoop&quot;:false,&quot;itemWidth&quot;:100,&quot;itemMargin&quot;:5}'
                 style="line-height: 40px; height:100; box-shadow:none;">
                <ul class="am-slides lyx">
                    {{each val.geval_image as value k}}
                    <a class="J-thumb-img" href="#none" data-ind="0">
                        <img src="{{value}}"
                             alt="{{val.username}}的晒单图片" width="48" height="48">
                    </a>

                    <li><img class="am-thumbnail" src="{{value}}" alt="{{val.username}}的晒单图片"/></li>
                    {{/each}}

                </ul>
            </div>

        </div>
    </div>
    {{/each}}
</script>
<script>
    $(function () {
        getCollection();
        calcPrice();
        /*输入数量后处理*/
        $("#number").blur(function () {
            var min = skuInfo.min;
            var max = skuInfo.max;
            var number = $("#number").val();
            if (!isNaN(number)) {
                if (number < min) {
                    layer.msg('购买数量不能小于最小起订量！');
                    $("#number").val(min);
                }
                if (number > max) {
                    layer.msg('购买数量不能大于库存！');
                    $("#number").val(max);
                }
            } else {
                layer.msg('购买数量必须为数字！');
                $("#number").val(min);
            }
            calcPrice()
        });
        $('#hotsale').find('li').hover(function () {
            $('#hotsale').find('li').removeClass('hover');
            $(this).addClass("hover");
        })
    });

    function goodsinfo(obj) {
        $('.contentbox .tab-title').find('li').removeClass('active');
        $(obj).addClass('active');
        var itemname = $(obj).data('name');
        $('.tab-main .item').hide();
        $('#' + itemname).show();
        if (itemname == 'details') {
            $('.tab-main .item').show();
        }
    }

    /*数量减*/
    function dec(obj) {
        var num = $(obj).next().val();
        var min = $(obj).data('min');
        if (num <= min) {
            layer.msg('购买数量不能小于最小起订量！')
        } else {
            $(obj).next().val(num - 1);
            calcPrice()
        }
    }

    /*数量加*/
    function inc(obj) {
        var num = $(obj).prev().val();
        var max = $(obj).data('max');
        if (num >= max) {
            layer.msg('购买数量不能大于库存！')
        } else {
            $(obj).prev().val(parseInt(num) + 1);
            calcPrice()
        }
    }

    /*计算单价和总价*/
    function calcPrice() {
        var num = $("#number").val();
        $.ajax({
            url: '{:url("home/Promotion/getPrice")}',
            type: "POST",
            data: {num: num, sku_id: skuInfo.sku_id},
            success: function (data) {
                $('#unitPrice').empty().text(data.price);
                $('#totalPrice').text(data.money);
            }
        })
    }

    var page = 0;
    var level = 0;
    var drop = $('#page').dropload({
        scrollArea: window,
        threshold: 5000,
        loadDownFn: function (me) {
            page++;
            // 拼接HTML
            $.post('{:url("/home/Goods/getGeval")}', {
                goods_id: '{$goodsInfo.goods_id}',
                level: level
            }, function (data) {
                var html = template('geval-tpl', data);
                $('#geval-list').append(html);
                if (page >= data.last_page) {
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                }
                me.resetload();
            });

        }
    });

    function setLevel(levels) {
        level = levels;
        $('#geval-list').empty();
        drop.noData(false);
        drop.unlock();
        drop.resetload();
    }

    /*加入收藏*/
    function collection(obj) {
        var uid = $(obj).data('uid');
        if (uid == '') {
            layer.msg('请登录后收藏！')
            return false;
        }
        var text = $('#collection-text').text();
        if (text == '加入收藏') {
            var url = '{:url("home/User/favoriteAdd")}'
            var status = 1; //将要取消收藏
        }
        if (text == '已收藏') {
            var url = '{:url("home/User/favoriteDel")}'
            var status = 2;//将要加入收藏
        }
        var channel = '3';
        var info_id = $(obj).data('infoid');
        $.ajax({
            url: url,
            type: "POST",
            data: {channel: channel, info_id: info_id},
            success: function (data) {
                layer.open({
                    content: data.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
                if (data.code == 1) {
                    setCollectionStatus(status);
                    getCollection()
                }
            }
        })
    }

    /*更改收藏状态*/
    function setCollectionStatus(status) {
        var icon = $('#collection').find('.iconfont');
        var text = $('#collection-text');
        /*设置为已收藏*/
        if (status == 1) {
            text.prev().attr('src', '/public/mobile/images/24.png');
            icon.removeClass('icon-star').addClass('icon-11');
            text.empty().html('已收藏');
        }
        /*设置为未收藏*/
        if (status == 2) {
            text.prev().attr('src', '/public/mobile/images/24.png');
            icon.removeClass('icon-11').addClass('icon-star');
            text.empty().html('加入收藏');
        }
    }

    /*获取收藏数量及当前用户是否收藏*/
    function getCollection() {
        var info_id = skuInfo.sku_id;
        var channel = '3';
        var uid = "{$userInfo.uid}";
        $.ajax({
            url: '{:url("home/Public/favoriteInfo")}',
            type: "POST",
            data: {channel: channel, info_id: info_id, uid: uid},
            success: function (data) {
                $('.collection-num').empty().html(data.count);
                setCollectionStatus(data.status);
            }
        })
    }

    $('.field-attr').click(function () {
        var obj = $(this);
        obj.addClass('active').siblings().removeClass('active');
    });
    var keys = {};
    var data = {};
    var skuInfo = {
        sku_id: "{$goodsInfo.sku_id}",
        price: "{$goodsInfo['goods_price']}",
        min: parseInt("{$goodsInfo['minimum']}"),
        max: parseInt("{$goodsInfo['goods_stock']}")
    };

    function sub() {
        var num = $('#number').val();
        $.post('{:url("promotionGroupBuyJoin")}', {
            num: num,
            sku_id: '{$goodsInfo.sku_id}',
            goods_id: '{$goodsInfo.goods_id}'
        }, function (data) {
            if (data.msg === '请先支付') {
                location.href=data.url;
            } else {
                layer.open({
                    content: data.msg
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
                if (data.code) {
                    location.reload()
                }
            }
        })
    }

</script>
{/block}
